{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="main"}
<script id="toolbar" type="text/html">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除选中</button>
</script>
<script id="tool" type="text/html">
    <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>
<table id="table" lay-filter="table"></table>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer','jquery','table'],function(){
        var layer = layui.layer,$ = layui.jquery,table = layui.table
        var cols = [
            {type:'checkbox'},
            {field:'id',title:'ID',width:60},
            {field:'title',title:'标题',},
            {field:'url',title:'跳转地址'},
            {field:'img',title:'图片预览',templet:function(d){
                if(d.img){
                    return `<img src="${d.img}" class="preview">`
                }else{
                    return ''
                }
                }},
            {field:'create_time',title:'创建日期'},
            {title:'操作',toolbar: '#tool',width:130}
        ];
        table.render({
            url:'/admin/banner',
            elem:'#table',
            toolbar:'#toolbar',
            cols:[cols],
            defaultToolbar:[],
            parseData:function(res){
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
            page:true,
            height:'full-50'
        })
        table.on('toolbar(table)',function(obj){
            var event = obj.event
            var checkStatus = table.checkStatus(obj.config.id);
            switch (event) {
                case 'add':
                    layer.open({
                        type: 2,
                        content: '/admin/editBanner',
                        title:"编辑轮播图",
                        area:['850px','550px']
                    });
                    break;
                case 'del':
                    let id = checkStatus.data.map(item=>item.id)
                    $.get('/admin/delBanner',{id},res=>{
                        table.reload('table')
                    })
                    break;
            }
        })
        table.on('tool(table)',function(obj){
            let event = obj.event,data = obj.data
            switch (event) {
                case 'edit':
                    layer.open({type:2,content:'/admin/editBanner?id='+data.id,title:"编辑轮播图",area:['850px','550px']})
                    break;
                case 'del':
                    $.get('/admin/delBanner',{id:data.id},res=>{
                        table.reload('table')
                    })
                    break;
            }
            console.log(obj)
        })
        $("body").on('click','.preview',function(){
            layer.photos({
                photos: $(this).parent(),
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        })
    })
</script>
{/block}